<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import type { FormInstance, FormRules, UploadInstance } from "element-plus";
import dayjs from "dayjs";
import { Search, UploadFilled } from "@element-plus/icons-vue";
import { router } from "@/router";
import { useAssetsStore } from "@/store/modules/asset";
import IpChart from "./ipchart.vue";
import IpChartVert from "./ipchartvert.vue";
import Gather from "../../gather/index.vue";
import GatherChart from "../../gather/gatherchart/gatherchart.vue";
import {
  splitAndValidateDomains,
  splitAndValidateIpv4,
  splitAndValidateIpv6,
  transGMTToBeijing,
} from "@/utils/regUtil";

import { getAsset, addAsset, get_all_assets } from "@/api/asset";
import { message } from "@/utils/message";
import { xemitter } from "@/utils/mitt";
import {
  copyTextToClipboard,
  downloadByOnlineUrl,
  downloadByBase64,
  downloadByData,
  downloadByUrl,
} from "@pureadmin/utils";

const uploadRef = ref<UploadInstance>();

const assetStore = useAssetsStore();
const submitUpload = () => {
  uploadRef.value!.submit();
};

const uploadError = (e) => {
  console.log("上传错误：", e);
};

defineOptions({
  name: "IpGroup",
});

const formInline = reactive({
  hardwareGroupName: "",
  hardwareRegion: "",
  hardwareId: "",
  creater: "",
  startTime: "",
  endTime: "",
});

const formAddHardware = reactive({
  hardwareType: "",
  hardwareName: "",
  hardwareRegion: "",
  black_scope: "",
});

const formAddHardwareRow = reactive({
  hardwareType: "",
  hardwareName: "",
  hardwareRegion: "",
});

interface RuleForm {
  hardwareName: string;
  hardwareRegion: string;
  hardwareType: string;
}

const formSize = ref("default");
const addHardwareFormRef = ref<FormInstance>();
const addHardwareRowFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  hardwareName: "Hello",
  hardwareRegion: "",
  hardwareType: "",
});

const parentBorder = ref(false);
const refreshChart = ref(true);
const childBorder = ref(false);
// const chartDatas = reactive({
//   chart: "name"
// });
const tableData = ref([
  {
    scope_group_name: "test",
    scope_type: "ip",
    scope: ["111. 111. 111.112", "12. 12. 12.12", "13.13.13.13"],
    black_scope: [],
    scope_id: "65994d1b8dbf870043af437c",
    create_time: "2021-08-10 07:59:59",
  },
  {
    scope_group_name: "test1",
    scope_type: "domain",
    scope: ["bau.com", "www.qq.com"],
    black_scope: [],
    scope_id: "65994d1b8dbf870043af437cvc",
    create_time: "2021-08-10 07:59:59",
  },
]);

const currentPage = ref(1); // 当前页码
const pageSize = ref(10); // 每页显示的条数
const totalTabalData = ref(0); // 总条数

//自定义校验规则
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("Please input the password again"));
  } else if (value !== ruleForm.hardwareType) {
    callback(new Error("Two inputs don't match!"));
  } else {
    callback();
  }

  //用逗号或空格分割域名的正则表达式
  const testString =
    "www.microsoft.com, www.google.com, www.apple.com, not a domain, www.amazon.com";

  // 调用函数并打印结果
  const result = splitAndValidateIpv4(testString);
  console.log("Valid domains: ", result.valid);
  console.log("Invalid domains: ", result.invalid);
};

const hardwareRules = reactive<FormRules>({
  hardwareName: [
    { required: true, message: "请输入资产名称", trigger: "blur" },
    // { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" }
    // { validator: validatePass2, trigger: 'blur' }
  ],
  hardwareRegion: [
    {
      required: true,
      message: "请填写资产范围",
      trigger: "blur",
    },
  ],
  hardwareType: [
    {
      required: false,
      message: "请选择一个资产类别",
      trigger: "change",
    },
  ],
  black_scope: [
    {
      required: false,
      message: "请填写需要过滤的资产范围",
      trigger: "change",
    },
  ],
});

const hardwareRowRules = reactive<FormRules>({
  hardwareRegion: [
    {
      required: true,
      message: "请填写资产范围",
      trigger: "blur",
    },
  ],
});

const showAddHardwareDialog = ref(false);
const showAddHardwareRowDialog = ref(false);
//自定义资产组弹框
const showCustomerAssetDialog = ref(false);

const onSubmit = () => {
  console.log("submit!");
};

//新建资产
const onAddSubmit = async (formEl: FormInstance) => {
  //用逗号或空格分割域名的正则表达式
  // formEl.resetFields();
  //表单验证
  console.log("formEL:", formEl);
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      addAsset({
        scope_group_name: formAddHardware.hardwareName,
        scope: formAddHardware.hardwareRegion,
        scope_type: "ip", // formAddHardware.hardwareType,先不分类
        black_scope: formAddHardware.black_scope,
      }).then((response) => {
        if (response.code == 2000) {
          getAssetList();
          showAddHardwareDialog.value = false;
        } else if (response.code == 2004) {
          getAssetList();
          message(response.message, {
            duration: 8000,
            type: "error",
          });
          showAddHardwareDialog.value = false;
        } else {
          showAddHardwareDialog.value = false;
          message(response.message);
        }
      });
    } else {
      console.log("error submit!", fields);
    }
  });

  //重置所有表单
  //   formEl.resetFields();

  //清理某个字段的表单验证信息。
  // formRef.clearValidate("tel");

  //单个表单项验证
  // const formRef: any = unref(registerFormRef);
  // formRef.validateField("tel", (valid: boolean) => {
  //   if (valid) {
  //     console.log("valid:", valid);
  //   }
  // });
};

//已存在资产添加资产
const onAddRowSubmit = async (formEl: FormInstance) => {
  //用逗号或空格分割域名的正则表达式
  // formEl.resetFields();
  //表单验证
  console.log("formEL:", formEl);
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      // addAsset({
      //   name: formAddHardware.hardwareName,
      //   scope: formAddHardware.hardwareRegion,
      //   scope_type: formAddHardware.hardwareType
      // }).then(response => {
      //   if (response.code == 2000) {
      //     console.log("新建成功!");
      //     getAssetList();
      //     showAddHardwareDialog.value = false;
      //   } else {
      //     message(response.message, "error");
      //   }
      // });

      showAddHardwareRowDialog.value = false;
    } else {
      console.log("error submit!", fields);
    }
  });
};

//获取资产列表
const getAssetList = () => {
  // debugger;
  const endParam = {
    group_id: "",
    scope_type: "",
    start_time: formInline.startTime,
    end_time: formInline.endTime,
    scope_group_name: formInline.hardwareGroupName,
    page: currentPage.value,
    per_page: pageSize.value,
  };

  getAsset(endParam).then((response) => {
    if (response.code == 2000) {
      tableData.value = tranEndTableData(response.data.asset_groups);
      currentPage.value = response.data.page;
      totalTabalData.value = response.data.total;
      assetStore.SET_ALL_ASSETS(response.data.asset_groups);
      setTimeout(() => {
        xemitter.emit("emitPieData", {
          pieData: settingChartData(response.data.stats),
          pieType: "ippie",
        });
      }, 700);
      console.log("tableData:", tableData);
    }
  });
};

//转化后端时间
const tranEndTableData = (ipitems) => {
  return ipitems.map((item) => {
    const obj = { ...item };
    obj.create_time = changeEndDate(item.create_time);
    return obj;
  });
};

//设置饼图的数据
const settingChartData = (params) => {
  return params.map((pieData) => ({
    name: pieData.group_name,
    value: pieData.ip_count ? pieData.ip_count : pieData.domain_count,
    id: pieData.group_id,
  }));
};

//行内添加资产分组范围
const addAssetRow = (params, currentRow) => {
  showAddHardwareRowDialog.value = true;
  formAddHardwareRow.hardwareName = currentRow.name;
  console.log("params:", params);
};

//删除资产,单选或多选
const deleteAsset = (params, currentRow) => {
  console.log("params:", params);
};

//复制资产
const copyAsset = (params, type) => {
  console.log("params:", params);
  if (type === "normal") {
    const success = copyTextToClipboard(params.row.scope.join("\n"));
    message("复制成功", { type: "success" });
  } else {
    const success = copyTextToClipboard(params.row.black_scope.join("\n"));
    message("复制成功", { type: "success" });
  }
};

//去资产详情
const gotoAssetDetail = (rowdata) => {
  const type = rowdata.scope_type;
  if (type === "ip") {
  } else if (type === "domain") {
  } else {
  }
  // console.log("幽灵路由不跳转资产详情1次");
  router.push("/assetmg/assetdetail?tp=" + type);
};

const addHardware = async () => {
  showAddHardwareDialog.value = true;
};

const openHardwareDialog = () => {
  showAddHardwareDialog.value = true;
};

const openCustomerAssetDialog = () => {
  showCustomerAssetDialog.value = true;
};

//获取资产数值
const getAssetsNumber = () => {
  get_all_assets({})
    .then((result) => {
      if (result.code === 2000) {
      }
    })
    .catch((err) => {});
};

onMounted(() => {
  getAssetList();
  // getAssetsNumber();
});

const value1 = ref<[Date, Date]>([
  new Date(2000, 10, 10, 10, 10),
  new Date(2000, 10, 11, 10, 10),
]);

const tiemValue2 = ref("");

const shortcuts = [
  {
    text: "一天内",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24);
      return [start, end];
    },
  },
  {
    text: "上周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "上个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "上三个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];

const changeDate = (val: any) => {
  formInline.startTime = dayjs(val[0]).format("YYYY-MM-DD HH:mm:ss");
  formInline.endTime = dayjs(val[1]).format("YYYY-MM-DD HH:mm:ss");
  getAssetList();
};

// 后端传过来的格林尼治时间
const changeEndDate = (val: any) => {
  // const localDate = dayjs(val).utcOffset(8).format("YYYY-MM-DD HH:mm:ss");
  //.utcOffset(8)
  // console.log("localDate", localDate);

  return transGMTToBeijing(val);

  // const date = new Date(val); // 格林尼治时间
  // const beijingDate = date.toLocaleString("zh-CN", {
  //   timeZone: "Asia/Shanghai"
  // }); // 北京时间
  // console.log(beijingDate);

  // return beijingDate;
};

// | `con→`   | adds default constructor in the class `constructor() {}`|
// | `met→`   | creates a method inside a class `add() {}` |
// | `pge→`   | creates a getter property `get propertyName() {return value;}` |
// | `pse→`   | creates a setter property `set propertyName(value) {}` |

// ### Various methods
// | Trigger  | Content |
// | -------: | ------- |
// | `fre→`   | forEach loop in ES6 syntax `array.forEach(currentItem => {})`|
// | `fof→`   | for ... of loop `for(const item of object) {}` |
// | `fin→`   | for ... in loop `for(const item in object) {}` |
// | `anfn→`  | creates an anonymous function `(params) => {}` |
// | `nfn→`   | creates a named function `const add = (params) => {}` |
// | `dob→`   | destructing object syntax `const {rename} = fs` |
// | `dar→`   | destructing array syntax `const [first, second] = [1,2]` |
// | `sti→`   | set interval helper method `setInterval(() => {});` |
// | `sto→`   | set timeout helper method `setTimeout(() => {});` |
// | `prom→`  | creates a new Promise `return new Promise((resolve, reject) => {});`|
// | `thenc→` | adds then and catch declaration to a promise `.then((res) => {}).catch((err) => {});`|

const fontwatermark = reactive({
  color: "rgba(25, 234, 234, 0.15)",
});
</script>

<template>
  <div class="right-container">
    <Gather class="gather-box-blue" />
    <!-- <GatherChart /> -->

    <div class="ip-chart-box">
      <IpChartVert />
    </div>
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <el-form
            :inline="true"
            :model="formInline"
            class="demo-form-inline"
            size="small"
          >
            <el-form-item>
              <el-button type="primary" @click="openHardwareDialog"
                >新建资产组</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="openCustomerAssetDialog"
                >合规平台资产
                <i class="iconfont iconfont-tabs" />
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                v-if="false"
                @click="
                  downloadByUrl(
                    'https://github.com/xiaoxian521/xiaoxian521/archive/refs/heads/main.zip',
                    'xiaoxian521.zip'
                  )
                "
              >
                下载资产模板
              </el-button>
            </el-form-item>
            <br />
            <el-form-item label="资产组名称">
              <el-input
                v-model="formInline.hardwareGroupName"
                placeholder="资产组名称"
                maxlength="30"
                clearable
                @keydown.enter="getAssetList"
              >
                <!-- prefix -->
                <template #append>
                  <el-button @click="getAssetList" :icon="Search" />
                </template>
                <!-- <template #suffix>
                  <el-icon class="el-input__icon"><search /></el-icon>
                </template> -->
              </el-input>
            </el-form-item>
            <el-form-item label="资产组范围">
              <el-input
                v-model="formInline.hardwareRegion"
                placeholder="资产组范围"
                maxlength="30"
                clearable
              >
                <template #append>
                  <el-button :icon="Search" />
                </template>
              </el-input>
            </el-form-item>

            <!-- <el-form-item label="资产组ID">
              <el-input
                v-model="formInline.hardwareId"
                placeholder="资产组ID"
                :suffix-icon="Search"
                clearable
              />
            </el-form-item> -->
            <el-form-item label="创建人">
              <el-input
                v-model="formInline.creater"
                placeholder="创建人"
                clearable
                @keydown.enter="getAssetList"
              >
                <template #append>
                  <el-button @click="getAssetList" :icon="Search" />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="tiemValue2"
                type="datetimerange"
                :shortcuts="shortcuts"
                range-separator="至"
                start-placeholder="起始日期"
                end-placeholder="结束日期"
                @change="changeDate"
              />
              <!-- value-format="x" 使用format指定输入框的格式。 使用value-format指定绑定值的格式；默认情况下，组件接受并返回Date对象。 -->
            </el-form-item>

            <!-- <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item> -->
            <el-form-item>
              <el-button type="success" @click="onSubmit">批量导出</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="warning" @click="onSubmit">删除</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>

      <el-table :data="tableData" :border="parentBorder" style="width: 100%">
        <el-table-column type="index" width="100" label="序号" />

        <el-table-column type="expand" v-if="false">
          <template #default="props">
            <!-- <div m="4">
            </div> -->
          </template>
        </el-table-column>
        <el-table-column label="资产组名称" prop="scope_group_name">
          <template #default="rowscope">
            <el-link
              type="primary"
              :underline="true"
              @click="gotoAssetDetail(rowscope.row)"
              >{{ rowscope.row.scope_group_name }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="资产范围" min-width="300px" width="300px">
          <template #default="rowscope">
            <el-tag
              v-if="rowscope.row.scope && rowscope.row.scope.length >= 1"
              :key="0"
              class="mx-1"
              type="success"
              effect="plain"
            >
              {{ rowscope.row.scope[0] }}
            </el-tag>
            <el-tag
              v-if="rowscope.row.scope && rowscope.row.scope.length > 1"
              :key="1"
              class="mx-1"
              type="success"
              effect="plain"
            >
              {{ rowscope.row.scope[1] }}
            </el-tag>
            <el-tag
              :key="2"
              v-if="rowscope.row.scope && rowscope.row.scope.length > 2"
              class="mx-1"
              type="success"
              effect="plain"
              >...</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="">
          <template #default="rowscope">
            <div>
              <el-link
                type="primary"
                :underline="true"
                @click="copyAsset(rowscope, 'normal')"
                >复制</el-link
              >
            </div>
          </template>
        </el-table-column>

        <el-table-column label="黑名单范围">
          <template #default="blackscope">
            <el-tag
              v-if="
                blackscope.row.black_scope &&
                blackscope.row.black_scope.length >= 1
              "
              :key="0"
              class="mx-1"
              type="warning"
              effect="plain"
            >
              {{ blackscope.row.black_scope[0] }}
            </el-tag>
            <el-tag
              v-if="
                blackscope.row.black_scope &&
                blackscope.row.black_scope.length > 1
              "
              :key="1"
              class="mx-1"
              type="warning"
              effect="plain"
            >
              {{ blackscope.row.black_scope[1] }}
            </el-tag>
            <el-tag
              :key="2"
              v-if="
                blackscope.row.black_scope &&
                blackscope.row.black_scope.length > 2
              "
              class="mx-1"
              type="warning"
              effect="plain"
              >...</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="">
          <template #default="rowscope">
            <div v-if="rowscope.row.black_scope.length">
              <el-link
                type="primary"
                :underline="true"
                @click="copyAsset(rowscope, 'black')"
                >复制</el-link
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="create_user" />
        <el-table-column label="创建时间" prop="create_time" />
        <el-table-column>
          <template #default="rowscope">
            <el-button
              size="small"
              @click="addAssetRow(rowscope.$index, rowscope.row)"
              >添加资产分组范围</el-button
            >
            <el-button size="small" type="primary">添加监控任务</el-button>
            <el-button
              size="small"
              type="warning"
              @click="deleteAsset(rowscope.$index, rowscope.row)"
            >
              删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- :page-sizes="[10, 20, 30, 40]"
        @page-size="handleSizeChange" -->
      <!-- layout="total, sizes, prev, pager, next, jumper" -->
      <el-pagination
        @current-change="getAssetList"
        v-model:current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        v-model:page-size="pageSize"
        @size-change="getAssetList"
        layout="total, sizes, prev, pager,next"
        :total="totalTabalData"
        background
      />
    </el-card>
    <el-dialog
      v-model="showAddHardwareDialog"
      :show-close="true"
      destroy-on-close
      width="500px"
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">新建资产组</h4>
        </div>
      </template>

      <el-form
        :inline="false"
        :model="formAddHardware"
        :rules="hardwareRules"
        ref="addHardwareFormRef"
        class="demo-form-inline"
      >
        <el-form-item
          label="资产类别"
          label-width="100px"
          prop="hardwareType"
          v-if="false"
        >
          <el-select
            v-model="formAddHardware.hardwareType"
            placeholder="资产类别"
            class="select-hardware"
            clearable
          >
            <el-option label="ip资产" value="ip" />
            <el-option label="域名资产" value="domain" />
          </el-select>
        </el-form-item>

        <el-form-item
          label="资产组名称"
          label-width="100px"
          prop="hardwareName"
        >
          <el-input
            v-model="formAddHardware.hardwareName"
            placeholder="资产组名称"
            clearable
            maxlength="30"
          />
        </el-form-item>

        <el-form-item
          label="资产组范围"
          label-width="100px"
          prop="hardwareRegion"
        >
          <el-input
            v-model="formAddHardware.hardwareRegion"
            placeholder="请输入域名, 如baidu.com, live.qq.com, 输入多个目标用换行或逗号分隔!"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 8 }"
            clearable
          />
        </el-form-item>
        <el-form-item label="黑名单范围" label-width="100px" prop="black_scope">
          <el-input
            v-model="formAddHardware.black_scope"
            placeholder="用来过滤资产范围中不存在的域名，请输入域名, 如baidu.com, live.qq.com, 输入多个目标用换行或逗号分隔!"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 8 }"
            clearable
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div>
          <el-button @click="showAddHardwareDialog = false"> 取消 </el-button>
          <el-button type="primary" @click="onAddSubmit(addHardwareFormRef)">
            <!-- <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon> -->
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="showAddHardwareRowDialog"
      :show-close="true"
      destroy-on-close
      width="500px"
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">添加资产分组范围</h4>
        </div>
      </template>

      <el-form
        :inline="false"
        :model="formAddHardwareRow"
        :rules="hardwareRowRules"
        ref="addHardwareRowFormRef"
        class="demo-form-inline"
      >
        <el-form-item
          label="资产组名称"
          label-width="100px"
          prop="hardwareName"
        >
          <el-input
            v-model="formAddHardwareRow.hardwareName"
            placeholder="资产组名称"
            clearable
            disabled
            maxlength="30"
          />
        </el-form-item>

        <el-form-item
          label="资产组范围"
          label-width="100px"
          prop="hardwareRegion"
        >
          <el-input
            v-model="formAddHardwareRow.hardwareRegion"
            placeholder="请输入域名, 如baidu.com, live.qq.com, 输入多个目标用换行或逗号分隔!"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 8 }"
            clearable
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div>
          <el-button @click="showAddHardwareRowDialog = false">
            取消
          </el-button>
          <el-button
            type="primary"
            @click="onAddRowSubmit(addHardwareRowFormRef)"
          >
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="showCustomerAssetDialog"
      :show-close="true"
      destroy-on-close
      width="500px"
    >
      <template #header="{ titleId, titleClass }">
        <div class="my-header">
          <h4 :id="titleId" :class="titleClass">自定义资产组</h4>
        </div>
      </template>

      <el-upload
        class="upload-demo"
        drag
        action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
        :limit="1"
        :before-upload="beforeXlsxUpload"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        accept=".xls,.xlsx"
        method="post"
        :with-credentials="true"
      >
        <!-- headers -->
        <!-- multiple 是否支持多项 -->
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">拖动文件上传 或者<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">
            请严格按照excel模板文件录入资产组并上传
          </div>
        </template>
      </el-upload>

      <template #footer>
        <div>
          <el-button @click="showCustomerAssetDialog = false"> 取消 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-pagination) {
  justify-content: right;
  margin-top: 10px;
  margin-right: 30px;
}

:deep(.el-card__header) {
}
.right-container {
  height: 100%;
  margin: 10px;
  border-radius: 5px;
  background: white;
}

.select-hardware {
  width: 100%;
}
</style>
